<template>
  <!-- 主菜单 -->
  <!--  :router=true或者只写router, 表示开启路由模式,以菜单绑定的index值作为路由路径-->
  <!-- default-active默认激活的菜单 -->
  <el-menu
    :uniqueOpened="true"
    class="el-menu-vertical-demo"
    background-color="#333744"
    text-color="#fff"
    active-text-color="#409EFF"
    :collapse="isCollapse"
    :collapse-transition="true"
    :router="true"
    :default-active="activePath"
  >
    <!-- 一级菜单 -->
    <el-submenu :index="item.id" v-for="item in menuList" :key="item.id">
      <!-- 一级菜单的模板区域 -->
      <template #title>
        <!-- 图标 -->
        <i :class="'el-icon-' + item.icon.toLowerCase()"></i>
        <!-- 文本 -->
        <span>{{ item.authName }}</span>
      </template>
      <!-- 二级菜单 -->
      <el-menu-item
        :index="'/' + subItem.path"
        v-for="subItem in item.children"
        :key="subItem.id"
        @click="saveNavState('/' + subItem.path)"
      >
        <template #title>
          <!-- 图标 -->
          <i class="el-icon-menu"></i>
          <!-- 文本 -->
          <span>{{ subItem.authName }}</span>
        </template>
      </el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script>
import { getMenus } from "network/permissions.js";
export default {
  name: "HomeMenu",
  data() {
    return {
      activePath: "",
      menuList: [] //左侧菜单数据
    };
  },
  props: {
    isCollapse: {
      type: Boolean,
      default() {
        return false;
      }
    }
  },
  created() {
    this.getMenuList();
    window.sessionStorage.setItem("activePath", this.$route.path);
    this.activePath = this.$route.path;
    // this.activePath = window.sessionStorage.getItem("activePath"); //从sessionStorage中获取激活的路径
    // let fromPath = window.sessionStorage.getItem("fromPath"); //获取前一个路径
    // if (
    //   this.activePath &&
    //   fromPath !== this.activePath &&
    //   this.$route.path !== this.activePath
    // )
    //   return this.$router.push(this.activePath);
    // else if (!this.activePath) return this.$router.push("/welcome");
    // if (!this.activePath) {
    //   window.sessionStorage.setItem("activePath", this.$route.path);
    //   this.activePath = this.$route.path;
    // }
    //默认跳转到保存的地址
    // else return this.$router.push("/welcome");
  },
  activated() {
    window.sessionStorage.setItem("activePath", this.$route.path);
    this.activePath = this.$route.path;
  },
  watch: {
    $route(to, from) {
      this.activePath = to.path;
    }
  },
  methods: {
    //将激活的地址保存到sessionStorage
    saveNavState(activePath) {
      window.sessionStorage.setItem("activePath", activePath); //将激活的地址保存到sessionStorage
      this.activePath = activePath;
    },
    //加载首页菜单
    async getMenuList() {
      try {
        var res = await getMenus("tree");
        if (!res) return;
        if (!res.success) return this.$message.error({ showClose: true, message: data.msg });
        this.menuList = res.response;
      } catch (err) {
        console.log(err);
      }
    }
  }
};
</script>

<style lang="less" scoped>
.iconfont {
  margin-right: 10px;
}
.el-menu {
  border-right: none;
}
</style>
